<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/css/bootstrap.css"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/font-awesome/css/font-awesome.min.css"> 
        <script src="../libs/AdminLTE-2.4.18/bower_components/jquery/dist/jquery.js"></script>
        <script src="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../libs/sdk/date.js"></script>
        <script src="../libs/sdk/json.js"></script>
        <script src="../libs/sdk/hhls.js"></script>
        <script src="../libs/sdk/hhIotGateway.js"></script>
        <script src="../libs/sdk/kurento-client.js"></script>
        <script src="../libs/sdk/kurento-utils.js"></script>
        <script src="js/tmUtils.js"></script> 
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    
        <title>专家支持</title>

    </head>
    <body>
        <style>
            html , body , #expert{ width: 100%; height: 100%; padding: 0; margin: 0; background-color: #111; color: #fafafa;}
            ul{ padding: 0; margin: 0; list-style: none;}

            .divRemoteVideo{
                width: 100%;
                height: 100%;
                position: relative;                
                overflow: hidden;
            }
            .divRemoteVideo video{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .divRemoteVideo .divTitle{
                position: absolute;
                background-color: #000;
                height: 40px;
                line-height: 40px;
                top: 20px;
                left: 50%;
                padding:0 15px;
                border-radius: 40px;
                transform: translate(-50%);
            }

            .divToolPan{ 
                position: absolute; 
                bottom: 20px;
                left: 50%;
                transform: translate(-50%);
                background-color: rgba(0,0,0,0.6);
            }
            .divToolPan .divLocalVideo{
                width: 177px;
                height: 100px;
                border-right: 1px solid #333;
            }
            .divToolPan .divLocalVideo video{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .divToolPan .divLocal{
                padding: 10px 0px;
            }
            .divToolPan .divLocal .divCaption{
                padding: 0px 15px;
                border-bottom: 1px solid #333;
                height: 40px; line-height: 40px;
            }
            .divToolPan .divLocal .divAcs{
                padding: 0px 15px; 
                padding-top: 10px;
            }
        </style> 
        <div class="app" id="expert"> 
            <div class="divRemoteVideo">
                <video id="rv" autoplay  ></video>
                <div class="divTitle" id="divTitle" @click="hd">[{{info.channelCode}}] [{{info.channelName}}] [{{info.channelDesc}}]</div>
            </div>
            <div class="divToolPan clearfix">
                <div class="divLocalVideo pull-left">
                    <video id="lv" autoplay  ></video>
                </div>
                <div class="divLocal pull-left">
                    <div class="divCaption" id="divMyName">{{info.userName}}</div>
                    <div class="divAcs clearfix">
                        <button class="btn btn-sm btn-success pull-left" @click="switchCamera"><i class="fa fa-video-camera"></i> 摄像头</button>
                        <button class="btn btn-sm btn-info pull-left" style="margin-left: 15px;" @click="shareScreen"><i class="fa fa-tv"></i> 屏幕</button>
                    </div>
                </div>
            </div>
        </div>
        <script> 
            var app = new Vue({
                el:"#expert",
                created(){
                    var me = this;
                    try{ 
                        me.getInfo().then(()=>{
                            return me.openMQ()
                        }).then(()=>{
                            return me.loadChannelObjs()
                        }).then(()=>{
                            return me.createUnits()
                        }).then(()=>{
                            console.log('expert start')
                        })
                    }
                    catch(er){
                        console.log(er);
                    }
                },
                data(){
                    return {
                        clientId:'',
                        info:{} ,
                        unit:null,
                        mqClient: null
                    }
                },
                methods:{
                    getInfo(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                me.createSession().then(clientId=>{
                                    me.clientId = clientId;
                                    var key = "expert/getInfo";
                                    var ps = {clientId : me.clientId};
                                    commClient.query(key,ps).then(res=>{
                                        me.info = res[0] ;                           
                                        success();
                                    })
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    createSession(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{ 
                                var chUserId = hhls.getUrlParamByDefault('cuid' , 25);
                                var clientId = ['cid', ( new Date()).getTime() , parseInt(1000*Math.random())].join('');
                                var key = "expert/newSession";
                                commClient.query(key , {chUserId: chUserId , clientId: clientId}).then(res=>{ 
                                    success(clientId);
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    openMQ(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                var onConnect = function () {
                                    console.log('open mq.' , me.clientId)
                                }
                                var onDisConnect = function () {}
                                var onRecMsg = function (msgData) {
                                    console.log(msgData);
                                }
                                commClient.openMq( me.clientId , onConnect , onDisConnect , onRecMsg).then(mqc=>{
                                    me.mqClient = mqc;
                                    success();
                                });
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    loadChannelObjs(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                commClient.getClient().then(client=>{ 
                                    
                                    var audioHubCode = 'audioHub-'+me.info.chId;
                                    var audioHub = commClient.getObjByCode(audioHubCode);

                                    if( audioHub ==null){
                                        commClient.objs.client.appPipe.create("Composite").then(hub=>{ 
                                            return commClient.registKmsObj(hub , audioHubCode, 'common')
                                        }).then(obj=>{
                                            success();
                                        })
                                    }
                                    else{
                                        success();
                                    }
                                    
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    createUnits(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{                              
                                var  lv = document.getElementById('lv');
                                var  rv = document.getElementById('rv');
                                var localUnitCode = "srcEnd-" + me.info.chId +'u' + me.info.chUserId ;
                                commClient.openPeerUnit(localUnitCode , me.clientId , 'sr' , lv ,rv).then(unit=>{
                                    unit.peer.localVideo.muted = false;
                                    unit.peer.remoteVideo.muted = false;
                                    me.unit = unit;
                                    var audioHubCode = 'audioHub-'+me.info.chId;
                                    var audioHub = commClient.getObjByCode(audioHubCode);  
                                    var audioPort = null;
                                    audioHub.createHubPort().then(hubPort=>{
                                        audioPort = hubPort;
                                        var hubPortCode = audioHubCode +"-port-"+ me.clientId;
                                        return commClient.registKmsObj(audioPort , hubPortCode, me.clientId);
                                    }).then(hubPort=>{
                                        return audioPort.connect( unit.end , "AUDIO")
                                    }).then(()=>{
                                        return unit.end.connect( audioPort , "AUDIO")
                                    }).then(()=>{
                                        return unit.end.connect( unit.end , "VIDEO")
                                    }).then(()=>{
                                        return TCommClient.setHD( me.unit.end)
                                    }).then(()=>{
                                        var msg = {
                                            msgId: "online" ,
                                            msgBody:{
                                                code: localUnitCode ,
                                                kmsId: unit.end.id ,
                                                clientId: me.clientId
                                            }
                                        }
                                        var topic =  commClient.config.mq.topics.appTopic+"/"+ commClient.config.appId ;
                                        me.mqClient.publish(topic , JSON.stringify(msg));
                                        success();
                                    })
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } , 
                    shareScreen(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                TCommClient.shareScreen( me.unit.peer).then( ()=>{
                                    console.log( 'share screen');
                                    success();
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    switchCamera(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                TCommClient.switchCamera( me.unit.peer).then( ()=>{
                                    console.log( 'switch camera');
                                    success();
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    hd(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                var end = me.unit.end;
                                end.getChildren().then( res=>{
                                    console.log('getChildren', res);
                                    return end.getChilds()
                                }).then( res=>{
                                    console.log('getChilds', res);
                                    return end.getConnectionState()
                                }).then( res=>{
                                    console.log('getConnectionState', res);
                                    return end.getCreationTime()
                                }).then( res=>{
                                    console.log('getCreationTime', res);
                                    return end.getGstreamerDot()
                                }).then( res=>{
                                    console.log('getGstreamerDot', res);
                                    return end.getICECandidatePairs()
                                }).then( res=>{
                                    console.log('getICECandidatePairs', res);
                                    return end.getIceConnectionState()
                                }).then( res=>{
                                    console.log('getIceConnectionState', res);
                                    return end.getMaxOuputBitrate()
                                }).then( res=>{
                                    console.log('getMaxOuputBitrate', res);
                                    return end.getMaxOutputBitrate()
                                }).then( res=>{
                                    console.log('getMaxOutputBitrate', res);
                                    return end.getMaxVideoRecvBandwidth()
                                }).then( res=>{
                                    console.log('getMaxVideoRecvBandwidth', res);
                                    return end.getMaxVideoSendBandwidth()
                                }).then( res=>{
                                    console.log('getMaxVideoSendBandwidth', res);
                                    return end.getStats()
                                }).then( res=>{
                                    console.log('getStats', res);
                                    return end.getMediaState()
                                }).then( res=>{
                                    console.log('getMediaState', res);
                                    return end.getRembParams()
                                }).then( res=>{
                                    console.log('getRembParams', res);
                                    return end.getRembParams()
                                }).then( res=>{
                                    console.log('', res); 
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                }

            })
        </script>
    </body>
</html>